<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- https://github.com/darkreader/darkreader/blob/main/CONTRIBUTING.md#disabling-dark-reader-on-your-site -->
    <meta name="darkreader-lock" />

    <title>Editor Tools</title>
    <style id="preview-theme-styles"></style>
  </head>

  <body
    style="
      padding: 0;
      margin: 0;
      height: fit-content;
      width: 100%;
      background-color: var(--typst-preview-background-color, #888) !important;
    "
  >
    <script>
      {
        /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
        function deltaE(rgbA, rgbB) {
          let labA = rgb2lab(rgbA);
          let labB = rgb2lab(rgbB);
          let deltaL = labA[0] - labB[0];
          let deltaA = labA[1] - labB[1];
          let deltaB = labA[2] - labB[2];
          let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
          let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
          let deltaC = c1 - c2;
          let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
          deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
          let sc = 1.0 + 0.045 * c1;
          let sh = 1.0 + 0.015 * c1;
          let deltaLKlsl = deltaL / 1.0;
          let deltaCkcsc = deltaC / sc;
          let deltaHkhsh = deltaH / sh;
          let i =
            deltaLKlsl * deltaLKlsl +
            deltaCkcsc * deltaCkcsc +
            deltaHkhsh * deltaHkhsh;
          return i < 0 ? 0 : Math.sqrt(i);
        }

        function rgb2lab(rgb) {
          let r = rgb[0] / 255,
            g = rgb[1] / 255,
            b = rgb[2] / 255,
            x,
            y,
            z;
          r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
          g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
          b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
          x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
          y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
          z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
          x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
          y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
          z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
          return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
        }

        // https://stackoverflow.com/questions/26414770/getting-the-rgb-values-for-a-css-html-named-color-in-javascript
        function cssColorToRgba(cssColor) {
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = cssColor;
          context.fillRect(0, 0, 1, 1);
          return context.getImageData(0, 0, 1, 1).data;
        }

        const themeKind = document.body?.getAttribute("data-vscode-theme-kind");
        const serverDark =
          themeKind === "vscode-dark" ||
          (typeof acquireVsCodeApi === "undefined" &&
            window.matchMedia?.("(prefers-color-scheme: dark)").matches);

        const defaultDarkBackgroundColor = "rgb(17, 17, 17)";
        const defaultLightBackgroundColor = "rgb(255, 255, 255)";
        const defaultBackgroundColor = serverDark
          ? defaultDarkBackgroundColor
          : defaultLightBackgroundColor;
        const defaultToolbarDarkFgColor = "#fff";
        const defaultToolbarLightFgColor = "#000";
        const defaultToolbarFgColor = serverDark
          ? defaultToolbarDarkFgColor
          : defaultToolbarLightFgColor;
        let previewBackgroundColor =
          getComputedStyle(document.documentElement).getPropertyValue(
            "--vscode-sideBar-background"
          ) || defaultBackgroundColor;
        let previewToolbarFgColor =
          getComputedStyle(document.documentElement).getPropertyValue(
            "--vscode-menu-foreground"
          ) || defaultToolbarFgColor;

        let preferColorScheme = "dark";
        /// Perceptible distance between colors:
        /// 0~1: cannot distinguish by human eyes
        /// 1~2: perceptible through close observation
        /// 2~10: perceptible at a glance
        if (
          deltaE(cssColorToRgba(previewBackgroundColor), [255, 255, 255]) < 5
        ) {
          previewBackgroundColor = defaultLightBackgroundColor;
          previewToolbarFgColor = defaultToolbarLightFgColor;
          preferColorScheme = "light";
        }
        document.documentElement.style.colorScheme = preferColorScheme;

        let previewForegroundColor = previewToolbarFgColor;

        const defaultToolbarBorderColor = "rgba(0, 0, 0, 0)";
        const previewToolbarBorderColor =
          getComputedStyle(document.documentElement).getPropertyValue(
            "--vscode-menu-border"
          ) || defaultToolbarBorderColor;

        const defaultToolbarBgColor = "rgb(50, 54, 57)";
        const previewToolbarBgColor =
          getComputedStyle(document.documentElement).getPropertyValue(
            "--vscode-menu-background"
          ) || defaultToolbarBgColor;

        if (serverDark) {
          document.body.classList.add("typst-preview-dark");
        } else {
          document.body.classList.add("typst-preview-light");
        }
        // append css variable --typst-preview-background-color
        document.documentElement.style.setProperty(
          "--typst-preview-background-color",
          previewBackgroundColor
        );
        document.documentElement.style.setProperty(
          "--typst-preview-foreground-color",
          previewForegroundColor
        );
        document.documentElement.style.setProperty(
          "--typst-preview-toolbar-fg-color",
          previewToolbarFgColor
        );
        document.documentElement.style.setProperty(
          "--typst-preview-toolbar-border-color",
          previewToolbarBorderColor
        );
        document.documentElement.style.setProperty(
          "--typst-preview-toolbar-bg-color",
          previewToolbarBgColor
        );
      }
    </script>
    <script type="module" src="%VITE_ENTRY%"></script>
    <div id="tinymist-app"></div>
  </body>
</html>
